<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .phoneNumber::before {
            content: "\260E";
            font-size: 17px;
        }
        /* string */
        
        .book::before {
            content: "<<";
            color: blue;
        }
        
        .book::after {
            content: ">>";
            color: blue;
        }
        /* attr() */
        
        a::after {
            content: "(" attr(href) ")";
        }
        /* url */
        
        a::before {
            content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
        }
        
        a {
            text-decoration: none;
        }
        /* css 计数器 */
        
        ol {
            counter-reset: section;
            list-style: none;
        }
        
        li::before {
            counter-increment: section;
            content: counter(section) ".";
        }
        
        .container {
            counter-reset: sec;
        }
        
        h1 {
            counter-reset: subsec;
        }
        
        h1::before {
            counter-increment: sec;
            content: counter(sec) ",  ";
        }
        
        h2::before {
            counter-increment: subsec;
            content: counter(sec) "," counter(subsec) "  ";
        }
        /* 文本前加自定义图标 */
        
        .icon {
            width: 300px;
            position: relative;
            line-height: 50px;
            text-align: center;
        }
        
        .icon::before {
            content: " ";
            /* display: block; */
            width: 10px;
            height: 10px;
            background-color: #c00000;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-40%);
        }
    </style>
</head>

<body>
    <p class="phoneNumber">13912345678</p>
    <p class="book">平凡的世界</p>
    <a href="https://www.baidu.com">百度</a>
    <ol>
        <li>css counter</li>
        <li>css counter</li>
        <li>css counter</li>
        <li>css counter</li>
    </ol>
    <div class="container">
        <h1>Html Tutorials</h1>
        <h2>Html Tutorials</h2>
        <h2>Html Tutorials</h2>
        <h2>Html Tutorials</h2>
        <h1>javaScript</h1>
        <h2>javaScript</h2>
        <h2>javaScript</h2>
        <h1>XML tutorials</h1>
        <h2>XML tutorials</h2>
        <h2>XML tutorials</h2>
    </div>

    <div class="fatherIcon">
        <h1 class="icon">文本前加图标</h1>
    </div>
</body>

</html>